<template>
  <div>
    <!-- 尝试移植为dialog -->
<!--    <el-row :gutter="15">-->
<!--      <el-form-->
<!--        ref="elForm"-->
<!--        :model="formData"-->
<!--        :rules="dialogrules"-->
<!--        size="medium"-->
<!--        label-width="100px"-->
<!--        label-position="left"-->
<!--      >-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="题目类型" prop="type">-->
<!--            <el-input-->
<!--              v-model="formData.type"-->
<!--              placeholder="请输入题目类型"-->
<!--              :disabled="true"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="所属题库" prop="bankTypeId">-->
<!--            <el-select-->
<!--              v-model="formData.bankTypeId"-->
<!--              default-first-option-->
<!--              placeholder="请选择模板"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="(item, index) in questionBankType"-->
<!--                :key="index"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--                :disabled="item.disabled"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24"></el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="模板分类" prop="formwork">-->
<!--            <el-select-->
<!--              v-model="formData.formwork"-->
<!--              default-first-option-->
<!--              placeholder="请选择模板"-->
<!--              @change="handleFormwork()"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="(item, index) in formworkOptions"-->
<!--                :key="index"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--                :disabled="item.disabled"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <el-form-item label="选项数量" prop="optionCount">-->
<!--            <el-input-->
<!--              type="number"-->
<!--              v-model.trim="formData.optionCount"-->
<!--              placeholder="请输入选项数量"-->
<!--              clearable-->
<!--              disabled-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24"></el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="分值" prop="fraction">-->
<!--            <el-input-->
<!--              v-model.trim="formData.fraction"-->
<!--              placeholder="请输入分值"-->
<!--              clearable-->
<!--              disabled-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="难易程度" prop="difficulty">-->
<!--            <el-select-->
<!--              v-model="formData.difficulty"-->
<!--              filterable-->
<!--              allow-create-->
<!--              default-first-option-->
<!--              placeholder="请选择难易程度"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="(item, index) in field103Options"-->
<!--                :key="index"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--                :disabled="item.disabled"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        &lt;!&ndash;        单选题    &ndash;&gt;-->
<!--        <div v-if="type=='singleChoiceServiceImpl'">-->

<!--          <el-col :span="24">-->
<!--            <el-form-item label="小题名称" prop="smallTopic">-->
<!--              <el-input-->
<!--                v-model="formData.smallTopic"-->
<!--                type="textarea"-->
<!--                placeholder="请输入小题名称"-->
<!--                :autosize="{minRows: 4, maxRows: 4}"-->
<!--                :style="{width: '100%'}"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="19">-->
<!--            <el-form-item label="选项内容" prop="field106">-->
<!--              <el-input-->
<!--                v-model.trim="formData.field106"-->
<!--                placeholder="请输入选项内容"-->
<!--                clearable-->
<!--                :style="{width: '100%'}"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="5">-->
<!--            <el-form-item label-width="1px">-->
<!--              <el-button type="primary" size="medium" @click="addchose">添加选项</el-button>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="选项" prop="field108">-->
<!--              <span :style="{color:'#909399'}" v-if="this.formData.options==''">请添加选项</span>-->
<!--              <el-radio-group v-model="formData.answer" size="medium" @change="selectchange">-->
<!--                <div class="radio">-->
<!--                  <el-radio-->
<!--                    class="radio-item"-->
<!--                    v-for="(item, index) in options"-->
<!--                    :key="index"-->
<!--                    :label="item.value"-->
<!--                    :disabled="item.disabled"-->
<!--                  >{{item.num}}.{{item.context}}-->
<!--                  </el-radio>-->
<!--                </div>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label-width="100px" label v-if="(options.length)!=0">-->
<!--              <el-button type="danger" size="medium" @click="deletechose">删除选项</el-button>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="答案" prop="answer">-->
<!--              <el-input-->
<!--                v-model="formData.answer"-->
<!--                placeholder="请输入答案"-->
<!--                :disabled="true"-->
<!--                clearable-->
<!--                :style="{width: '100%'}"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="小题讲解" prop="explains">-->
<!--              <el-input-->
<!--                v-model="formData.explains"-->
<!--                placeholder="请输入小题讲解"-->
<!--                clearable-->
<!--                :style="{width: '100%'}"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </div>-->

<!--        &lt;!&ndash;          多选题&ndash;&gt;-->
<!--        &lt;!&ndash;          <div v-if="type==''"></div>&ndash;&gt;-->
<!--        &lt;!&ndash;          填空题&ndash;&gt;-->

<!--        <el-col :span="24">-->
<!--          <el-form-item label="考察知识点" prop="investigateKnow">-->
<!--            <el-input-->
<!--              v-model="formData.investigateKnow"-->
<!--              placeholder="请输入考察知识点"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="一级知识点" prop="knowledgeA">-->
<!--            <el-input-->
<!--              v-model="formData.knowledgeA"-->
<!--              placeholder="请输入一级知识点"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="二级知识点" prop="knowledgeB">-->
<!--            <el-input-->
<!--              v-model="formData.knowledgeB"-->
<!--              placeholder="请输入二级知识点"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="认知分类" prop="categorization">-->
<!--            <el-input-->
<!--              v-model="formData.categorization"-->
<!--              placeholder="请输入认知分类"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="内容相关性" prop="correlation">-->
<!--            <el-input-->
<!--              v-model="formData.correlation"-->
<!--              placeholder="请输入内容相关性"-->
<!--              clearable-->
<!--              :style="{width: '100%'}"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item size="large">-->
<!--            <el-button type="primary" @click="dialogsubmitForm">提交</el-button>-->
<!--            <el-button @click="dailogresetForm">重置</el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-form>-->
<!--    </el-row>-->

    <!--demoStart-->

    <div v-if="type=='singleChoiceServiceImpl'">
      <SingleChoiceAdd @getFormData="getFormData"getFormData></SingleChoiceAdd>
    </div>
    <div v-if="type=='multipleChoiceServiceImpl'">
      <MultipleChoiceAdd @getFormData="getFormData"></MultipleChoiceAdd>
    </div>
    <div v-if="type=='judgeServiceImpl'">
      <JudgeAdd @getFormData="getFormData"></JudgeAdd>
    </div>
    <div v-if="type=='completionServiceImpl'">
      <CompletionAdd @getFormData="getFormData"></CompletionAdd>
    </div>

    <div v-if="type=='shortAnswerServiceImpl'">
      <ShortAnswerAdd @getFormData="getFormData"></ShortAnswerAdd>
    </div>
    <div v-if="type=='bigQuestionServiceImpl'">
      <BigQuestionAdd @getFormData="getFormData"></BigQuestionAdd>
    </div>

    <!--demoEnd-->



  </div>
</template>
<script>
  import {
    listQuestionbank,
    getQuestionbank,
    delQuestionbank,
    addQuestionbank,
    updateQuestionbank,
    exportQuestionbank,
  } from "@/api/topic/questionbank";
  import {
    addSelect,
    search,
    changeSelect,
    getFormark,
    deleQuestion,
    deleQuestions,
  } from "@/api/topic/select";

  //start
  //单选
  import SingleChoiceAdd from '@/views/topic/add/singleChoiceAdd.vue'
  //多选
  import MultipleChoiceAdd from '@/views/topic/add/multipleChoiceAdd.vue'
  //判断
  import JudgeAdd from '@/views/topic/add/judgeAdd.vue'
  //填空
  import CompletionAdd from '@/views/topic/add/completionAdd.vue'
  //简答
  import ShortAnswerAdd from '@/views/topic/add/shortAnswerAdd.vue'
  //大题
  import BigQuestionAdd from '@/views/topic/add/bigQuestionAdd.vue'

  import OneSelect from '@/components/paperType/oneselect.vue'
  import {volume} from "@/assets/mixins/volume";
  import {paperType} from "@/assets/mixins/paperType";
  //end


  import showDetail from "@/components/showDetail";
  import {
    listTemplate,
    getTemplate,
    delTemplate,
    addTemplate,
    updateTemplate,
    exportTemplate
  } from "@/api/topic/template";
  import {listQuestionBankType} from "@/api/topic/QuestionBankType";
  import showitem from "../../views/paper/paper/showitem";
  import showpaper from "../../views/paper/paper/showpaper";

  export default {
    components: {
      showDetail: showDetail,
      search,
      showitem,
      showpaper,
      OneSelect,
      SingleChoiceAdd,
      JudgeAdd,
      MultipleChoiceAdd,
      CompletionAdd,
      ShortAnswerAdd,
      BigQuestionAdd
    },
    props: {
      type: {
        type: String
      }
    },
    data() {
      return {
        delkey: null,
        deleitemIndex: null,
        num: 1,
        formData: {},
        questionBankType: [],
        field103Options: [
          {
            label: "1",
            value: 1,
          },
          {
            label: "2",
            value: 2,
          },
          {
            label: "3",
            value: 3,
          },
          {
            label: "4",
            value: 4,
          },
          {
            label: "5",
            value: 5,
          },
          {
            label: "6",
            value: 6,
          },
          {
            label: "7",
            value: 7,
          },
          {
            label: "8",
            value: 8,
          },
          {
            label: "9",
            value: 9,
          },
          {
            label: "10",
            value: 10,
          },],
        formworkOptions: [],
        options: [],
        dialogrules: {
          difficulty: [
            {
              required: true,
              message: "选择题目难度",
              trigger: "blur",
            },
          ],
          type: [
            {
              required: true,
              message: "请输入题目类型",
              trigger: "blur",
            },
          ],
          bankTypeId: [
            {
              required: true,
              message: "请选择所属题库",
              trigger: "blur",
            },
          ],
          explains: [
            {
              required: true,
              message: "请输入小题讲解",
              trigger: "blur",
            },
          ],
          formwork: [
            {
              required: true,
              message: "请输入或选择模板分类",
              trigger: "blur",
            },
          ],
          fraction: [
            {
              required: true,
              message: "请输入分值,必须是数字",
              trigger: "blur",
            },
          ],
          field103: [
            {
              required: true,
              message: "请输入难易程度",
              trigger: "change",
            },
          ],
          smallTopic: [
            {
              required: true,
              message: "请输入小题名称",
              trigger: "blur",
            },
          ],
          answer: [
            {
              required: true,
              message: "请选择答案",
              trigger: "blur",
            },
          ],
          field110: [
            {
              required: true,
              message: "请输入考察知识点",
              trigger: "blur",
            },
          ],
          field111: [
            {
              required: true,
              message: "请输入一级知识点",
              trigger: "blur",
            },
          ],
          field112: [
            {
              required: true,
              message: "请输入二级知识点",
              trigger: "blur",
            },
          ],
          field113: [
            {
              required: true,
              message: "请输入认知分类",
              trigger: "blur",
            },
          ],
          field114: [
            {
              required: true,
              message: "请输入内容相关性",
              trigger: "blur",
            },
          ],
        },
      }
    },
    created() {
      listQuestionBankType().then(response => {
        this.questionBankType = response.rows
      });
      this.getFormarkdata()
      //  判断type类型
      if (this.type == 'singleChoiceServiceImpl') {
        //  单选题
        this.formData.type = '单项选择题'
      }
    },
    //监听
    watch: {
      type(val, oldval) {
        if (val != oldval) {
          //  改变状态
          this.$set(this, 'type', val)
        }
      }
    },
    methods: {
      getFormData(val){
        this.$emit('getFormData',val)
      },
      dialogsubmitForm() {
        // if(this.formData.options.length!=parseFloat(this.formData.optionCount)) {
        //   this.$message.error("选项数量不对");
        //   return
        // }
        this.$refs["elForm"].validate((valid) => {
          if (isNaN(Number(this.formData.fraction))) {
            this.$message.error("分值必须为数字");
            return;
          }
          if (valid) {
            this.formData.fraction = parseFloat(this.formData.fraction);
            //成功之后向父组件传递
            this.$emit('submitOneselect', this.formData)
            // addSelect(this.formData).then((response) => {
            //   this.msgSuccess("添加单选题成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
          // TODO 提交表单
        });
      },
      dailogresetForm() {
        this.formData = {
          type: "单项选择题",
          explain: "",
          beanName: "singleChoiceServiceImpl",
          fraction: undefined,
          difficulty: undefined,
          bankTypeId: undefined,
          smallTopic: undefined,
          optionCount: 0,
          field106: undefined,
          field108: 3,
          answer: undefined,
          investigateKnow: undefined,
          knowledgeA: undefined,
          knowledgeB: undefined,
          field113: undefined,
          field114: undefined,
          scoretype: null,
          options: [],
        };
        this.options = [];
        (this.delkey = ""),
          (this.deleitemIndex = ""),
          (this.num = 1),
          (this.myaddkey = 0);
      },
      //提交模板类型
      handleFormwork() {
        for (let i = 0; i < this.formworkOptions.length; i++) {
          if (this.formworkOptions[i].value == this.formData.formwork) {
            this.formData.optionCount = this.formworkOptions[i].count
            this.formData.fraction = this.formworkOptions[i].questionScore
            this.formData.questionTemplateId = this.formworkOptions[i].id
          }
        }

      },
      //获取模板类型
      getFormarkdata() {
        const data = {
          beanName: this.type,
        };
        listTemplate(data).then(response => {
          console.log("题型模板", response.rows)
          this.formworkOptions = response.rows
          for (let i = 0; i < response.rows.length; i++) {
            this.formworkOptions[i].label = response.rows[i].name
            this.formworkOptions[i].value = response.rows[i].name
          }

        });
        // getFormark(data).then((response) => {
        //   for (let i = 0; i < response.length; i++) {
        //     this.formworkOptions[i] = {
        //       label: response[i],
        //       value: response[i],
        //     };
        //   }
        // });
      },
      // 增加选项
      addchose() {
        const that = this;
        this.myaddkey = 0;
        if (!that.formData.field106) {
          that.$message.error("请输入选项内容");
          return;
        } else {
          let i = 0;
          for (i; i < this.options.length; i++) {
            if (this.options[i].value == this.formData.field106) {
              that.$message.error("该选项已存在");
              this.myaddkey = 1;
              break;
            }
          }
        }
        if (this.myaddkey == 1) {
          return;
        } else {
          const data = {
            context: this.formData.field106,
            value: this.formData.field106,
            keyTrue: false,
            num: String.fromCharCode(this.num + 64),
          };
          this.num++;
          this.options.push(data);
          this.formData.field106 = "";
          this.delkey = 1;
          this.formData.options = this.options;
        }
      },
      // 删除选项
      deletechose() {
        if (this.options.length == 1) {
          this.options = [];
          this.delkey = 0;
          this.formData.answer = "";
          this.num--;
        } else {
          if (!this.deleitemIndex) {
            this.$message.error("请选择一个选项删除或选项为空");
          } else {
            const index = this.deleitemIndex;
            this.options.splice(index, 1);
            this.num--;
            const that = this;
            this.options.forEach(function (value, index, array) {
              that.options[index].num = String.fromCharCode(index + 65);
            });
            this.formData.answer = "";

            this.formData.options = this.options;
          }
        }
      },
      // 单选正确答案
      selectchange(val) {
        this.formData.answer = val;
        this.formData.field108 = val
        //deleitemIndex
        const that = this;
        this.options.forEach(function (value, index) {
          if (val == value.value) {
            that.deleitemIndex = index;
            that.options[index].keyTrue = true;
          } else {
            that.options[index].keyTrue = false;
          }
        });
        this.formData.options = this.options;
      },
    }
  }
</script>
